<template>
  <div class="views" id="views">
    <div id="container" class="container"></div>
  </div>
</template>

<script>
import { App } from '@/assets/App/App'
import * as THREE from 'three'
import { GUI } from 'three/examples/jsm/libs/dat.gui.module'

const app = new App()
export default {
  data () {
    return {
      params: {
        methods: {
          animation: true, // 循环调用渲染
          renderer: true, // 应用渲染器
          light: true, // 在场景中加入全景光
          controls: true, // 使用轨道控制器，鼠标滚轮控制放大缩小，左键拖动绕中心点旋转，右键拖动中心点。
          postprocessing: true, // 使用后期处理
          statement: true // 在控制台打印声明，与本案例无关，可忽略。
        },
        events: {
          windowResize: true // 监听窗口尺寸变化，并改变渲染页面尺寸
        },
        params: {
          container: null, // 渲染结果输出dom页面
          renderer: [
            'WebGLRenderer'
          ],
          controls: [
            'OrbitControls'
          ],
          rendererParams: {
            antialias: true // 抗锯齿，可忽略。
          },
          postprocessing: [
            'OutlinePass'
          ]
        }
      },
      outlineParams: {
        edgeStrength: 5,
        edgeGlow: 0.5,
        edgeThickness: 1.0,
        pulsePeriod: 2,
        rotate: false,
        usePatternTexture: false
      }
    }
  },
  mounted () {
    this.params.params.container = document.getElementById('container') // 获取渲染结果输出dom页面
    /**
     * 初始化场景
     */
    app.init(this.params, (scene, camera, renderer) => {
      camera.position.set(1000, 100, 1000) // 修改相机位置
    })
    /**
     * 导入模型
     */
    app.addModel({
      url: 'static/model/fbx/cqcet/15/实训楼.FBX', // 模型地址
      type: 'fbx' // 模型格式
    }, () => { // 加载完成回调，可忽略。
      console.log('模型加载完成')
    })
    /**
     * 添加模型鼠标移动事件监听
     */
    app.addOn(app.scene, 'mousemove',
      (objList) => {
        const parentObj = objList[0].object.parent
        app.outlinePass.selectedObjects = [parentObj] // 设置需要轮廓发光的模型集合
      },
      'test_mousemove', {
        recursive: true
      },
      () => {
        app.outlinePass.selectedObjects = [] // 清空轮廓发光的模型集合
      })
    /**
     * 对需要后期处理的模型覆盖指定材质
     */
    new THREE.TextureLoader().load('static/model/img/tri_pattern.jpg', (texture) => {
      app.outlinePass.patternTexture = texture
      texture.wrapS = THREE.RepeatWrapping
      texture.wrapT = THREE.RepeatWrapping
    })
    /**
     * 使用gui调试边缘轮廓发光效果
     */
    var gui = new GUI({ width: 300 })
    this.gui = gui
    gui.add(this.outlineParams, 'edgeStrength', 0.01, 10).onChange(function (value) {
      app.outlinePass.edgeStrength = Number(value)
    })
    gui.add(this.outlineParams, 'edgeGlow', 0.0, 1).onChange(function (value) {
      app.outlinePass.edgeGlow = Number(value)
    })
    gui.add(this.outlineParams, 'edgeThickness', 1, 4).onChange(function (value) {
      app.outlinePass.edgeThickness = Number(value)
    })
    gui.add(this.outlineParams, 'pulsePeriod', 0.0, 5).onChange(function (value) {
      app.outlinePass.pulsePeriod = Number(value)
    })
    gui.add(this.outlineParams, 'rotate')
    gui.add(this.outlineParams, 'usePatternTexture').onChange(function (value) {
      app.outlinePass.usePatternTexture = value
    })
    var Configuration = function () {
      this.visibleEdgeColor = '#18f2f2'
      this.hiddenEdgeColor = '#ff0404'
    }
    var conf = new Configuration()
    gui.addColor(conf, 'visibleEdgeColor').onChange(function (value) {
      app.outlinePass.visibleEdgeColor.set(value)
    })
    gui.addColor(conf, 'hiddenEdgeColor').onChange(function (value) {
      app.outlinePass.hiddenEdgeColor.set(value)
    })
  },
  beforeDestroy () {
    this.gui.destroy()
  }
}
</script>

<style scoped>
.views {
  height: 100%;
  width: 100%;
}

.container {
  height: 100%;
  width: 100%;
}
</style>
